<template>
  <div class="header-container">
    <div class="left-context">
      <el-button
        icon="el-icon-menu"
        size="medium"
        style="margin-left: 8px"
        @click="menuShow"
      ></el-button>
      <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          class="breadcrumbItem"
          v-for="item in tags"
          :key="item.path"
          >{{ item.label }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="right-context">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-img">
          <img
            class="user-img"
            src="@/assets/image/other/IMG0486.png"
            style="margin-top: 2px"
          />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">个人信息</el-dropdown-item>
          <el-dropdown-item command="c">设置</el-dropdown-item>
          <el-dropdown-item command="quit">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Header",
  methods: {
    menuShow() {
      this.$store.commit("collapseChange");
    },
    handleCommand(command) {
      if ("quit" === command) {
        this.$confirm("确定退出", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          sessionStorage.clear();
          this.$router.push("/login");
        });
      }
      if ("a" === command) {
        var timenow = new Date().getTime();
        this.$http.get("sys/sysUser/generate?=d" + timenow);
      }
    },
  },
  computed: {
    ...mapState({
      tags: (state) => state.tab.menuList,
    }),
  },
};
</script>

<style lang="less" scoped>
.el-dropdown-img {
  padding-right: 10px;
}
.user-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.first-page {
  cursor: pointer;
  color: #fff;
  font-size: 15px;
}
.header-container {
  margin-left: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left-context {
  display: flex;
  justify-content: space-between;
}
.breadcrumb {
  margin-top: 12px;
  margin-left: 10px;
}
/deep/.el-breadcrumb {
  .el-breadcrumb__inner {
    font-weight: normal;
    &.is-link {
      color: rgb(44, 44, 44);
    }
  }
  & :last-child {
    .el-breadcrumb__inner {
      color: rgb(199, 199, 199);
    }
  }
}
// .el-breadcrumb  /deep/  .el-breadcrumb__inner
//       {
//         color: #444 !important;				//你想要设置的字体颜色
//     }
</style>